<template>
  <x-page>
    <x-filter @search="handleSearch" @reset="resetSearch" :itemLength="2">
      <x-filter-item :label="'仓库名称'">
        <el-input v-model="searchParams.addrName" :placeholder="'请输入仓库名称'" clearable maxlength="50"></el-input>
      </x-filter-item>
      <x-filter-item :label="'仓库编码'">
        <el-input v-model="searchParams.addrCode" :placeholder="'请输入仓库编码'" clearable maxlength="50"></el-input>
      </x-filter-item>
    </x-filter>
    <x-data>
      <template #tool>
        <el-row type="flex" class="tools" justify="space-between">
          <el-col :span="20">
            <el-col :span="20">
              <el-button type="primary" :icon="buttonIcons('add')" @click="add"> {{ '新增' }}</el-button>
            </el-col>
          </el-col>
          <el-col :span="4" class="tools-config">
            <x-column-config :columns="columns" @updateColumns="updateColumns" @on-refresh="loadData" />
          </el-col>
        </el-row>
      </template>
      <x-table
        ref="tableCom"
        :pagination="pagination"
        :data-source="tableData"
        :loading="loading"
        :row-key="'id'"
        @on-change="handleTableChange"
        @on-selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column :label="$t('common.serialNumber')" :width="55" fixed type="index" />
        <el-table-column
          v-for="(item, index) in tableColumns"
          :key="index"
          :prop="item.prop"
          :fixed="item.fixed"
          :show-overflow-tooltip="true"
          :width="item.width"
          :min-width="item.minWidth || '-'"
          :label="item.label"
          :sortable="'custom'"
        >
        </el-table-column>
        <el-table-column fixed="right" label="操作" :align="'center'" width="160">
          <template #default="scope">
            <more-table-actions
              :permis-list="permissionsActions"
              :action-list="getActions(actions)"
              :row="scope.row"
              @onActionClick="handleActions"
            />
          </template>
        </el-table-column>
      </x-table>
    </x-data>
    <x-dialog
      :title="dialogTitle"
      :show.sync="visible"
      v-if="visible"
      @onCancel="handleClose"
      @onSubmit="handleSubmit"
      width="40%"
    >
      <el-form :model="params" :rules="rules" ref="form" label-position="top">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item :label="'仓库名称'" prop="addrName">
              <el-input
                v-model="params.addrName"
                :placeholder="'请输入库存地点名称'"
                clearable
                maxlength="50"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="'仓库编码'" prop="addrCode">
              <el-input
                v-model="params.addrCode"
                :placeholder="'请输入库存地点编码'"
                clearable
                maxlength="50"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="'区域'" prop="areaArr">
              <x-address-input
                ref="serviceTypeTree"
                :other-params="{
                  beginLevel: 1,
                  endLevel: 3
                }"
                :placeholder="'请选择区域'"
                v-model="params.areaArr"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="'地址'" prop="address">
              <el-input v-model="params.address" :placeholder="'请填写详细地址'" clearable maxlength="50"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="'联系人'" prop="contacts">
              <el-input v-model="params.contacts" :placeholder="'请输入联系人'" clearable maxlength="50"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="'联系方式'" prop="contactsPhone" maxlength="50">
              <el-input v-model="params.contactsPhone" :placeholder="'请输入联系方式'" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </x-dialog>
  </x-page>
</template>

<script>
  import { buttonIcons, PermissionsMixin, QueryDictMixin, TableListMixin, throttle } from '@package/utils'
  import { warehouseColumns, warehouseActions } from '@/modules/config/config/businessOrgConfig.js'
  import { EnumApiCode } from '../../../../../../../globalEnum.js'
  import {
    apiWarehouseAdd,
    apiWarehouseDelete,
    apiWarehouseUpdate,
    warehouseListUrl
  } from '@/modules/config/api/businessOrgConfig.js'

  export default {
    name: 'Warehouse',
    mixins: [TableListMixin, QueryDictMixin, PermissionsMixin],
    data() {
      return {
        columns: warehouseColumns,
        actions: warehouseActions,
        listUrl: warehouseListUrl,
        searchParams: {
          addrCode: '',
          addrName: ''
        },
        tableData: [],
        pagination: {
          pageSize: 10,
          pageNum: 1
        },
        visible: false,
        params: {
          addrCode: '',
          addrName: '',
          areaArr: {},
          address: '',
          contacts: '',
          contactsPhone: '',
          id: '',
          state: 1
        },
        rules: {
          addrCode: [{ required: true, message: '请输入仓库编码', trigger: 'blur' }],
          addrName: [{ required: true, message: '请输入仓库名称', trigger: 'blur' }],
          areaArr: [{ required: true, message: '请选择区域', trigger: 'blur' }],
          address: [{ required: true, message: '请填写详细地址', trigger: 'blur' }],
          contacts: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
          contactsPhone: [
            { required: true, message: '请输入联系方式', trigger: 'blur' },
            {
              pattern: /^((0\d{2,3}-\d{7,8})|(1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}))$/,
              message: '请输入正确的电话号码',
              trigger: 'blur'
            }
          ]
        },
        dialogTitle: '新增'
      }
    },
    computed: {
      getActions() {
        return (actions) => {
          return actions.map((action) => {
            action.disabled = false
            return action
          })
        }
      }
    },
    methods: {
      buttonIcons,
      handleReset() {
        this.searchParams = {
          addrCode: '',
          addrName: ''
        }
        this.loadData()
      },
      async handleActions({ key, data }) {
        const { id } = data
        switch (key) {
          case 'edit': {
            if (id) {
              this.dialogTitle = '编辑'
              const { province, provinceId, city, cityId, area, areaId } = data
              this.params = {
                ...data,
                areaArr: [
                  {
                    province,
                    provinceId,
                    city,
                    cityId,
                    area,
                    areaId
                  }
                ]
              }
            } else {
              this.resetParams()
            }
            this.visible = true
            break
          }
          case 'delete': {
            const confirm = await this.$confirm('是否确定删除?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            })
            if (confirm) {
              const { code } = await apiWarehouseDelete(id)
              if (code === EnumApiCode.Success) {
                this.$message.success('删除成功')
                this.loadData()
              }
            }
            break
          }
          default:
            break
        }
      },
      handleExportExcel() {
        this.handleExport('test')
      },
      handleClose() {
        this.resetParams()
        this.visible = false
      },
      resetParams() {
        this.params = {
          addrCode: '',
          addrName: '',
          address: '',
          contacts: '',
          contactsPhone: '',
          id: '',
          state: 1
        }
      },
      handleSubmit: throttle(function () {
        this.$refs.form.validate(async (valid) => {
          if (valid) {
            const methods = this.params.id ? apiWarehouseUpdate : apiWarehouseAdd
            const { addrCode, addrName, address, contacts, contactsPhone, areaArr, id, state } = this.params
            const { province, provinceId, city, cityId, area, areaId } = areaArr[0]
            const params = {
              addrCode,
              addrName,
              address,
              contacts,
              contactsPhone,
              province,
              provinceId,
              city,
              cityId,
              area,
              areaId,
              id,
              state
            }
            const { code } = await methods(params)
            if (code === EnumApiCode.Success) {
              this.visible = false
              this.$message.success(`${this.dialogTitle}成功`)
              this.loadData()
            }
          }
        })
      }, 1000),
      add() {
        this.resetParams()
        this.visible = true
      }
    }
  }
</script>

<style scoped></style>
